<template>
  <div class="c-selectboxText">

      <div class="selectboxText" :class="{'selectboxText_active':checked}">

           {{text}}

      </div>

  </div>
</template>
<script>
    export default {
        props: {
          text:{
            type:String,
            default:''
          },
          checked:{
            type:Boolean,
            default:false
          }
        },
        data() {
            return {}
        },
        methods: {},
        components: {},
        mounted() {
        },
        created() {

        }
    }
</script>

<style lang="less">
  @selectcolor:rgb(157, 41, 41);

  .c-selectboxText{
    display: inline-block;
    .selectboxText{
      display: inline-block;
      min-width: 95px;
      margin-right: 5px;
      padding: 0px 10px;
      height: 34px;
      line-height: 32px;
      text-align: center;
      border-radius: 4px;
      background: rgb(247, 247, 247) none repeat scroll 0% 0%;
      border: 1px solid rgb(238, 238, 238);
      cursor: pointer;
      transition: all 0.3s;

      &:hover{
        background: rgb(157, 41, 41) none repeat scroll 0% 0%;
        border: 1px solid @selectcolor;
        color: rgb(255, 255, 255);
      }

      &_active{
        background: rgb(157, 41, 41) none repeat scroll 0% 0%;
        border: 1px solid @selectcolor;
        color: rgb(255, 255, 255);
      }
    }
  }
</style>
